import React from 'react';
import Input from 'shared/input';
import { apiPrefix } from 'shared/api';
import { Select } from 'antd';
import Axios from 'axios';
import SureButton from '../SureButton';
import ThemeContext from '../../data';

import './index.less';

const { Option } = Select;

class BasicInformation extends React.Component {
  static contextType = ThemeContext;
  constructor(props) {
    super(props);
    this.state = {
      informationInput: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/dynamics`;
    Axios.get(api)
      .then(((response) => {
        this.setState({ informationInput: response.data.data });
      }));
  }
  handleOnchange=(value, index) => {
    console.log(value, index);
  }
  render() {
    console.log(`${this.context}`);
    const { informationInput } = this.state;
    return (
      <section className="basic-information">
        {
              informationInput
              .map(value => (
                <div key={value.id}>
                  {value.field_type === 'text' ?
                    <div>
                      <Input
                        inputKey={value.name}
                        label={value.name}
                        onChange={(val, key) => this.handleOnchange(val, key)}
                      />
                    </div>
                      :
                    <div>
                      <span>{value.name}</span>
                      <Select
                        style={{ width: 400, marginLeft: 20, marginTop: 20 }}
                        showSearch
                        placeholder={`请选择${value.name}`}
                        onChange={val => this.handleOnchange(val, value.name)}
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                      >
                        {
                            value.options.map((val, ind) => (
                              <Option value={val.id} key={ind}>{val.name}</Option>
                              ))
                          }
                      </Select>
                    </div>}
                </div>
                  ))
              }
        <div className="fixed-button">
          <SureButton />
        </div>

      </section>
    );
  }
}

export default BasicInformation;
